<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自定义右键菜单</title>
    <style type="text/css">
    body,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 12px/24px arial;
    }
    
    #menu {
        position: absolute;
        top: -9999px;
        left: -9999px;
        width: 100px;
        border-radius: 3px;
        list-style-type: none;
        border: 1px solid #8f8f8f;
        padding: 2px;
        background: #fff;
    }
    
    #menu li {
        position: relative;
        height: 24px;
        padding-left: 24px;
        background: #eaead7;
        vertical-align: top;
    }
    
    #menu li a {
        display: block;
        color: #333;
        background: #fff;
        padding-left: 5px;
        text-decoration: none;
    }
    
    #menu li.active {
        background: #999;
    }
    
    #menu li.active a {
        color: #fff;
        background: #8f8f8f;
    }
    
    #menu li em {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        background: url(../../../src/images/ico.png) no-repeat;
    }
    
    #menu li em.cur {
        background-position: 0 0;
    }
    
    #menu li em.copy {
        background-position: 0 -24px;
    }
    
    #menu li em.paste {
        background-position: 0 -48px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oMenu = document.getElementById("menu");
        var aLi = oMenu.getElementsByTagName("li");
        //加载后隐藏自定义右键菜单
        oMenu.style.display = "none";
        //菜单鼠标移入/移出样式
        for (i = 0; i < aLi.length; i++) {
            //鼠标移入样式
            aLi[i].onmouseover = function() {
                this.className = "active"
            };
            //鼠标移出样式
            aLi[i].onmouseout = function() {
                this.className = ""
            }
        }
        //自定义菜单
        document.oncontextmenu = function(event) {
            var event = event || window.event;
            var style = oMenu.style;
            style.display = "block";
            style.top = event.clientY + "px";
            style.left = event.clientX + "px";
            return false;
        };
        //页面点击后自定义菜单消失
        document.onclick = function() {
            oMenu.style.display = "none"
        }
    };
    </script>
</head>

<body>
    <center>自定义右键菜单，请在页面点击右键查看效果。</center>
    <ul id="menu" style="display: none; top: 210px; left: 779px;">
        <li class=""><em class="cut"></em><a href="javascript:;">剪切</a></li>
        <li class=""><em class="copy"></em><a href="javascript:;">复制</a></li>
        <li class=""><em class="paste"></em><a href="javascript:;">粘贴</a></li>
    </ul>
</body>

</html>
